<script setup>
import { ref } from "vue";
import MapSettingKonva from "./MapSettingKonva.vue";
import { agvPath } from "@/api/avg/path-setting";
import { ElMessage, ElMessageBox } from "element-plus";

const konva = ref();

// 列表默认展开类型
const openCollapse = ref("path");

// 路径
const path = {
  preview(route) {
    let raw = [];
    route = route.split(";");
    route.forEach((item) => {
      item = item.split(",");
      raw.push({
        x: item[0],
        y: item[1],
      });
    });

    konva.value.previewPath(raw);
  },
  async delete(id) {
    await ElMessageBox.confirm("确认继续操作吗", "警告");
    const { message } = await agvPath.delete(id);
    ElMessage({ type: "success", message });
    getPathData();
    konva.value.clearLayer();
  },
};
const pathData = ref([]);
async function getPathData() {
  const {
    data: { list = [] },
  } = await agvPath.read();
  pathData.value = list;
}

getPathData();
</script>

<template>
  <div class="flex">
    <div
      id="left-list"
      class="min-h-[calc(100vh-84px)] min-w-[240px] bg-[#f3f3f3] select-none shadow-2xl"
    >
      <el-collapse v-model="openCollapse" accordion>
        <el-collapse-item title="路径列表" name="path">
          <div
            v-for="item in pathData"
            :key="item.id"
            class="h-10 w-[200px] px-3 flex justify-between items-center cursor-pointer hover:bg-[#f3f3f3]"
            @click="path.preview(item.route)"
          >
            <span>{{ item.name }}</span>
            <el-button
              link
              size="small"
              type="danger"
              @click.stop="path.delete(item.id)"
            >
              删除
            </el-button>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="min-h-[calc(100vh-84px)] grow relative">
      <MapSettingKonva
        ref="konva"
        @confirm-success="getPathData"
      ></MapSettingKonva>
    </div>
  </div>
</template>

<style scoped>
:deep(.el-collapse-item__header),
:deep(.el-collapse-item__content) {
  padding-left: 20px;
}
</style>
